<template>
	<view v-if="detail.id" class="app-container">
		<view class="form-box flex-1">
			<view class="activity-item-box">
				<ActivityItem :data="detail" isSignUpPage />
			</view>
			<view class="form-main">
				<view class="title-box flex">
					<view class="title">报名信息</view>
					<view class="desc">请如实填写资料</view>
				</view>
				<uni-forms ref="uForm" :modelValue="formData" :rules="formRules" label-position="top" border
					err-show-type="toast">
					<uni-forms-item label="姓名" name="realname">
						<input type="text" v-model="formData.realname" placeholder="请输入姓名"
							placeholder-class="input-placeholder" />
					</uni-forms-item>
					<uni-forms-item label="身份证号" name="idcard">
						<input type="idcard" v-model="formData.idcard" placeholder="请输入身份证号"
							placeholder-class="input-placeholder" />
					</uni-forms-item>
					<uni-forms-item label="手机号码" name="phone">
						<input type="number" v-model="formData.phone" placeholder="请输入手机号码"
							placeholder-class="input-placeholder" />
					</uni-forms-item>
					<uni-forms-item label="验证码" name="code">
						<input class="code-input" v-model="formData.code" type="number" placeholder="请输入验证码"
							placeholder-class="input-placeholder" />
						<uv-code ref="uCode" unique-key="signUp" @change="codeChange" seconds="60" keep-running
							@start="startTime" @end="endTime"></uv-code>
						<text class="tips" :class="canGetCode ? 'active' : ''" @click="getPhoneCode">{{ tips }}</text>
					</uni-forms-item>
				</uni-forms>
			</view>
		</view>
		<view class="submit-box">
			<button type="primary" hover-class="is-hover" @click="submitForm">立即报名</button>
			<!-- 底部安全距离 -->
			<uv-safe-bottom></uv-safe-bottom>
		</view>
	</view>
</template>

<script setup>
	import {
		getActivity,
		sendMobileCode,
		activitySignUp
	} from "@/api";
	import {
		reactive,
		ref,
		toRefs
	} from "vue";
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import UvCode from "@/uni_modules/uv-code/components/uv-code/uv-code.vue";
	import store from "@/store";

	const state = reactive({
		detail: {},
		formData: {
			a_id: "",
			realname: "",
			idcard: "",
			phone: "",
			code: ""
		},
		formRules: {
			realname: {
				rules: [{
					required: true,
					errorMessage: "请输入姓名",
				}]
			},
			idcard: {
				rules: [{
					required: true,
					errorMessage: "请输入身份证号",
				}, {
					validateFunction: function(rule, value, data, callback) {
						if (!uni.$uv.test.idCard(value)) {
							callback("请输入正确的身份证号")
						}
						return true
					}
				}]
			},
			phone: {
				rules: [{
					required: true,
					errorMessage: "请输入手机号",
				}, {
					validateFunction: function(rule, value, data, callback) {
						if (!uni.$uv.test.mobile(value)) {
							callback("请输入正确的手机号")
						}
						return true
					}
				}]
			},
			code: {
				rules: [{
					required: true,
					errorMessage: "请输入验证码",
				}]
			}
		},
		tips: "获取验证码",
		canGetCode: true,
	});

	const {
		detail,
		formData,
		formRules,
		tips,
		canGetCode
	} = toRefs(state);

	const uForm = ref(null);
	const uCode = ref(null);

	// 获取活动详情
	async function getActivityData(id) {
		const res = await getActivity({
			id
		});
		detail.value = res.data;
	}

	// 获取手机验证码
	function getPhoneCode() {
		uForm.value.validateField(["phone"]).then(async () => {
			if (uCode.value.canGetCode) {
				const res = await sendMobileCode({
					phone: formData.value.phone,
					type: 3
				});
				uCode.value.start();
			} else {
				uni.showToast({
					title: "倒计时结束后再重新获取",
					icon: "none"
				})
			}
		})
	}

	// 提示文字改变
	function codeChange(text) {
		tips.value = text;
	}

	// 开始倒计时
	function startTime() {
		canGetCode.value = false;
	}

	// 倒计时结束
	function endTime() {
		canGetCode.value = true;
	}

	// 立即报名
	function submitForm() {
		uForm.value.validate().then(async res => {
			await activitySignUp(formData.value);
			uni.showToast({
				title: "报名成功",
				icon: "none"
			})
			setTimeout(() => {
				uni.navigateBack({
					delta: 1
				})
			}, 1000)
		})
	}

	onLoad(async (option) => {
		formData.value.a_id = option.id;
		getActivityData(option.id);
		const res = await store.dispatch("GetUserInfo");
		formData.value.phone = res.data.phone;
	})
</script>

<style scoped lang="scss">
	.app-container {
		.form-box {
			margin: 20rpx;

			.form-main {
				background-color: #FFFFFF;
				border-radius: 20rpx;
				padding: 30rpx;

				.title-box {
					justify-content: space-between;

					.title {
						font-size: 36rpx;
						font-weight: bold;
						position: relative;
						padding-left: 20rpx;

						&::before {
							content: "";
							display: block;
							width: 6rpx;
							height: 24rpx;
							background-color: var(--primary-color);
							border-radius: 6rpx;
							position: absolute;
							top: 0;
							bottom: 0;
							left: 0;
							margin: auto 0;
						}
					}

					.desc {
						font-size: 24rpx;
						color: var(--gray-font-color);
						position: relative;
						padding-left: 15rpx;

						&::before {
							content: "*";
							display: block;
							font-size: 30rpx;
							color: #FF4C4C;
							position: absolute;
							top: 0;
							bottom: 0;
							left: 0;
							margin: auto 0;
						}
					}
				}

				::v-deep .uni-forms {
					.uni-forms-item {
						.uni-forms-item__label {
							font-size: 30rpx;
							font-weight: bold;
						}

						.uni-forms-item__content {
							position: relative;

							.code-input {
								padding-right: 230rpx;
							}

							.tips {
								font-size: 30rpx;
								color: var(--gray-font-color);
								position: absolute;
								right: 0;
								top: 0;
							}

							.tips.active {
								color: #4C97FF;
							}
						}
					}
				}
			}
		}
	}
</style>